<template>
  <div class="shop-header">

    <!-- 搜索框 -->
    <van-row justify="end" class="header-two">
      <van-col span="21" class="search" offset="1">
        <van-search
          v-model="value"
          placeholder="搜索"
          
          background="#ff5654"
        />
      </van-col>
      <van-col span="2" class="shop">
        <van-icon name="shopping-cart-o" color="#fff" size="40" />
      </van-col>
    </van-row>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in image" :key="index">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>

    <!-- 轮播图下的两块 -->
    <van-row justify="space-between" class="my-row">
      <van-col span="10">新品上市</van-col>
      <van-col span="10" offset="3">二手商城</van-col>
    </van-row>

    <!-- 热销单品 -->
    <van-row justify="center" class="sale">
      <van-col span="24">热销单品</van-col>
    </van-row>

    <!-- 热销单品下的图片 -->
    <van-grid :column-num="4" class="my-img" >
      <van-grid-item v-for='(n,inx) in goods_icon' :key=inx>
          <img :src=n.imgurl />
          <div>{{n.goods_txt}}</div>
      </van-grid-item> 
    </van-grid>

    
    <!-- 家庭常用 -->
    <van-row justify="center" class="family">
      <van-col span="24">家庭常用</van-col>
    </van-row>


    <!-- 家庭常用下的图片 -->
    <van-grid :column-num="4" class="my-img2" >
      <van-grid-item v-for='(item,index) in goods_icon2' :key=index>
          <img :src=item.imgurl2 />
          <div>{{item.goods_txt2}}</div>
      </van-grid-item> 
    </van-grid>
  <Buttom></Buttom>
  </div>


</template>

<script>
import Buttom from '../components/Buttom'
export default {
  data() {
    return {
      image: [
        require("../assets/image/banner1(1).png"),
        require("../assets/image/banner2.png"),
        require("../assets/image/banner3.png"),
        require("../assets/image/banner4.png"),
      ],
      goods_icon:[
          {
              imgurl:require('../assets/image2/img_chuwugui.png'),
              goods_txt:'储物柜'
          },
          {
              imgurl:require('../assets/image2/img_zhaoming.png'),
              goods_txt:'照明灯'
          },
          {
              imgurl:require('../assets/image2/img_baozhen.png'),
              goods_txt:'抱枕'
          },
           {
              imgurl:require('../assets/image2/img_jingzi.png'),
              goods_txt:'镜子'
          },
      ],
       goods_icon2:[
          {
              imgurl2:require('../assets/image2/img_luodideng.png'),
              goods_txt2:'落地灯'
          },
          {
              imgurl2:require('../assets/image2/img_zhiwujia.png'),
              goods_txt2:'置物架'
          },
          {
              imgurl2:require('../assets/image2/img_aijiaodeng.png'),
              goods_txt2:'矮脚灯'
          },
           {
              imgurl2:require('../assets/image2/img_maojin.png'),
              goods_txt2:'毛巾'
          },
      ],

    };
  },
  components: {
      Buttom
  },
};
</script>

<style scoped>
.shop-header {
  width: 375px;
  height: 64px;
  background-color: #ff5654;
}
.shop-header .header-two {
  background-color: #ff5654;
  display: block;
}
.search .van-search{
   border-radius: 20px !important;
}
.header-two .shop{
    margin-top: 15px;
}
.shop .van-icon{
    margin-right: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 152px;
}
.my-row {
  margin: 14px 42px;
}
.my-row .van-col {
  width: 126px;
  height: 39px;
  border: 1px solid #ff5654;
  background-color: #ff5654;
  border-radius: 40px;
  text-align: center;
  color: #fff;
  line-height: 39px;
  font-size: 15px;
}
.sale,.family{
    margin: 10px auto;
}
.sale .van-col,.family .van-col {
  font-size: 13px;
  color: #000;
  opacity: 80%;
}
.my-img{
    border-radius: 8px;
    background-color: #000000;
    box-shadow: 14px;
}
.my-img .van-grid-item img,.my-img2 .van-grid-item img{
    width: 68px;
    height: 68px;
}
.my-img .van-grid-item div,.my-img2 .van-grid-item div{
    font-size: 12px;
    color: #000;
    opacity: 80%;
}
</style>
